<template>
  <div class="chess-board-container">
    <div class="chess-board">
      <div
        v-for="(coordinate, index) in coordinates"
        :key="coordinate[0] + '' + coordinate[1]"
        class="chess-board-cell"
        :class="[{ 'chess-board-cell-active': isChessActive(index) }]"
        @click="handleClick(coordinate, index)"
        :style="{
          gridColumn: coordinate[1] + 1,
          gridRow: coordinate[0] + 1,
        }"
      >
        {{ index + 1 }}
        <div class="tag-container">
          <div 
            v-for="item in currentChesses.filter(item => item.chessIndex === index)"
            class="tag" 
            :class="`tag-${playersConfig[item.playerIndex].color}`"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { coordinates, dataStore, currentChesses } = useFlight()

function isChessActive(index: number) {
  return currentChesses.value.find(item => item.chessIndex === index)
}

function handleClick(coordinate: [number, number], index: number) {
  console.log(dataStore.value.tasks)
  showDialog({
    title: `任务${index + 1}`,
    message: dataStore.value.tasks[index],
  })
}
</script>

<style scoped lang="scss">
.chess-board-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(10, 36px);
  justify-items: center;
  align-items: center;
  width: 100%;
  row-gap: 10px;
  column-gap: 8px;
  .chess-board-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: white;
    border: 2px solid #000;
    cursor: pointer;
    &:nth-child(4n) {
      background: #55ebc099;
      box-shadow: 0 4px 6px #55ebc0aa;
      &.chess-board-cell-active {
        background: #55ebc0;
      }
    }
    &:nth-child(4n + 1) {
      background: #fe739d99;
      box-shadow: 0 4px 6px #fe739daa;
      &.chess-board-cell-active {
        background: #fe739d;
      }
    }
    &:nth-child(4n + 2) {
      background: #fed65599;
      box-shadow: 0 4px 6px #fed655aa;
      &.chess-board-cell-active {
        background: #fed655;
      }
    }
    &:nth-child(4n + 3) {
      background: #5ec4ff99;
      box-shadow: 0 4px 6px #5ec4ffaa;
      &.chess-board-cell-active {
        background: #5ec4ff;
      }
    }
    &.chess-board-cell-active {
      color: #000;
      font-weight: 700;
      border-width: 3px;
    }
  }
  .tag-container {
    position: absolute;
    top: -10px;
    width: 100%;
    display: flex;
    align-self: center;
    justify-content: center;
    .tag {
      border: 5px solid;
      border-color: white transparent transparent transparent;
      &.tag-red {
        border-top: 10px solid red;
      }
      &.tag-blue {
        border-top: 10px solid blue;
      }
      &.tag-green {
        border-top: 10px solid green;
      }
      &.tag-yellow {
        border-top: 10px solid yellow;
      }
    }
  }
}
</style>
